<!--
@Author: 左盐
@Date:   2018-03-24 15:30:33
@Email:  huabinglan@163.com
@Project: xxx
@Last modified by:   左盐
@Last modified time: 2018-03-24 15:49:07
-->

<template lang="html">
    <div class="vl-task selected" @click="isOpen" :id="id + '_task'">
        <div class="tabIcon">
            <img :src="getTabIcon">
        </div>
        <div class="tabTxt">{{title}}</div>
    </div>
</template>

<script>
    import helper from './helper/helper.js';

    export default {
        data() {
            return {
                id: '',
                type: 0, //0（alert默认）1（页面层）2（iframe层）3（loading）4（tips层）,5(msg)
                title: '信息',
                content: '',
                area: 'auto',
                offset: 'auto',
                tabIcon: '',
                icon: -1,
                btn: '确定',
                time: 0,
                shade: true,
                yes: '',
                cancel: ''
            }
        },
        props: {

        },
        computed:{
            getTabIcon(){
                // 默认图标
                var tabIcon_default = '';
                if (this.tabIcon) {
                    return this.tabIcon;
                }else {
                    return tabIcon_default;
                }
            }
        },
        mounted() {
            this.delSelected();
        },
        methods: {
            isOpen(e){
                this.delSelected();
                e.currentTarget.classList.add('selected');
                let task = document.getElementById(this.id);
                if (task.style.display === 'none'){
                    task.style.display = 'inherit'
                }

                this.resetZIndex()
            },
            delSelected(){
                var a = document.getElementsByClassName('selected')
                for (var i = 0; i < a.length; i++) {
                    a[i].classList.remove('selected')
                }
            },
            resetZIndex() {
                let doms = document.querySelectorAll('.vl-notify-iframe');
                let max = 0;
                let dom = null;
                for (let i = 0, len = doms.length; i < len; i++) {
                    let value = parseInt(this.getStyle(doms[i].id, 'z-index'));
                    if (this.id == doms[i].id) {
                        dom = doms[i];
                    }
                    if (value > max){
                        max = value;
                    }
                }
                dom.style.zIndex = max + 1;
            },
            getStyle(el, styleProp) {
                var x = document.getElementById(el);
                if (window.getComputedStyle) {
                    var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
                } else if (x.currentStyle) {
                    var y = x.currentStyle[styleProp];
                }
                return y;
            },
            close(event) {
                if (this.shadeClose) {
                    helper.clickMaskCloseAll(event, this.layer, this.id);
                }
            },

        },
    }
</script>

<style lang="css">
    .vl-task{
        background: url("") no-repeat left 0;
        box-sizing: border-box;
        width: 112px;
        height: 44px;
        float: right;
        text-align: center;
        line-height: 43px;
        font-size: 14px;
        -moz-user-select: -moz-none;
        -webkit-user-select: none;
        margin: 0;
    }
    .vl-task:hover {
        background: url("") no-repeat left 0;
    }

    .tabIcon{
        float: left;
        width: 40px;
        height: 44px;
        line-height: 60px;
    }
    .tabIcon img{
        width: 32px;
        height: 32px;
        margin-top: 5px;
        margin-left: 10px;
    }
    .tabTxt{
        margin-left: 38px;
        margin-right: 6px;
        line-height: 43px;
        font-size: 12px;
        color: #FFF;
        overflow: hidden;
    }
    .selected{
        background: url("") no-repeat scroll 0 0 transparent;
    }
</style>
